<?php
	$this->beginContent('//layouts/main', array(
			'bodyClass' => 'layout-player',
			'includes' => ''
				. CHtml::scriptFile('http://s.imhonet.ru/js/modernizr.js')
				. CHtml::scriptFile('/js/jquery.js?'.microtime(true))
				//. CHtml::scriptFile('/js/jquery.xdomainajax.js')
				. CHtml::scriptFile('http://vkontakte.ru/js/api/xd_connection.js?2')
				. CHtml::scriptFile('/js/jplayer/jquery.jplayer.min.js')
				//. CHtml::scriptFile('http://documentcloud.github.com/underscore/underscore-min.js')
				//. CHtml::scriptFile('http://documentcloud.github.com/backbone/backbone-min.js')
				. CHtml::scriptFile('/js/underscore-min.js')
				. CHtml::scriptFile('/js/backbone-min.js')
				. CHtml::scriptFile('/js/md5.js')
				. CHtml::scriptFile('/js/global.js?'.microtime(true))
					. CHtml::scriptFile('/js/vkplayer/main.js?'.microtime(true))
					. CHtml::scriptFile('/js/vkplayer/models.js?'.microtime(true))
					. CHtml::scriptFile('/js/vkplayer/collections.js?'.microtime(true))
					. CHtml::scriptFile('/js/vkplayer/views.js?'.microtime(true))
				. CHtml::scriptFile('/js/init.js?'.microtime(true))
				. CHtml::cssFile('/css/main.css?'.microtime(true)),
			'jqueryData' => $this->renderJqueryData()	
		));
 ?>
	<div id="header">
		<div id="header-topline">
			<div id="header-topline-logo">imhonet <span>| Музыка</span></div>
			<div id="header-topline-search">
				<span class="search-input-wrap">
					<input id="search-input" type="text" name="search" autocomplete="off" placeholder="Название трека" />
					<span id="search-go" class="search-go" title="Найти"></span>
				</span>
			</div>
            <div class="header-topline-add">[Beta]</div>
		</div>
		<div id="header-player" class="header-player">
		</div>
		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<?php /*$this->widget('Player', array());*/ ?>
	</div>

    <div id="content-wrap">
		<div id="content">
			<?php echo $content; ?>
		</div>
	</div>

	<div id="sidebar">
		<div class="menu">
			<ul>
				<li class="menu-item anchor anchor-recommends">
					<span class="title hash-trigger" data-hash="recommends/">Рекомендованные</span>
				</li>
				<li class="menu-item anchor anchor-popular">
					<span class="title hash-trigger" data-hash="popular/">Популярные</span>
				</li>									
				<li class="folder menu-style-folder anchor anchor-tracklist">
					<span class="title folder-control" id="menu-albums-trigger" data-hash="tracklist1/">Мои плейлисты</span>
					<ul class="content">loading..</ul>
				</li>
				<li class="folder menu-style-folder anchor anchor-friendlist">
					<span class="title folder-control" id="menu-friends-trigger">Друзья</span>
					<ul class="content">loading..</ul>
				</li>				
			</ul>

		</div>
	</div>

    <div id="popup-bg"></div>

	<script type="text/template" id="tpl-loader-small">
		loading...
    </script>
    
    <script type="text/template" id="tpl-player-large">
		<div class="left-column">
            <div class="track-img">
            </div>
			<div class="player-control player-paused">
				<div class="player-prev"></div>
				<div class="play-button"></div>
				<div class="player-next"></div>
			</div>
		</div>
		<div class="right-column">
			<div class="track-info">
				<div class="title"><span><%= title %></span></div>
				<div class="artist">
                    <span><%= artist %></span>
					<span class="based-btn hash-trigger" data-hash="based/<%= hash %>/"></span>
                    <span class="video-btn"></span>
                    <span class="download-btn">Скачать</span>
                </div>
				<div class="progress">
					<div class="seek-bar">
						<div class="play-bar">
                            <div class="pinba"></div>
						</div>
			  		</div>
				</div>
                <div class="time">00:00</div>
			</div>
			<div class="feedback-container <%= attitude %>">
                <span class="control control-positive"></span>
                <span class="control control-negative"></span>
            </div>


            <div class="player-loop <%= loopClass %>"></div>
            <div class="player-shuffle <%= shuffleClass %>"></div>
            <div class="player-volume <%= muteClass %>"></div>
			<div class="volume">
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
            </div>
		</div>
		<div class="clear"></div>
    </script>

	<script type="text/template" id="tpl-audio-list-item">
        <div class="number"><%= num %>.</div>
		<div class="title"><span><%= artist %></span> - <%= title %></div>
		<div class="track-popup">
			<div class="track-popup-wrap">
				<div class="track-popup-content">
					<div class="video-btn">Видео</div>
                    <div class="download-btn">Скачать</div>
					<div class="audio-controls">
						<div class="feedback-container <%= attitude %>">
							<span class="control control-positive"></span>
							<span class="control control-negative"></span>
						</div>
						<div class="control-container"><span class="control"></span></div>
					</div>
				</div>
			</div>
		</div>
		<div class="duration"><%= duration %></div>
		<div class="content"></div>
    </script>

	<script type="text/template" id="tpl-user-short">
		<div class="user-short folder stay-open anchor anchor-tracklist-<%= uid %>">
			<div class="user-label hash-trigger folder-control" data-hash="user/<%= uid %>/tracklist/">
				<span class="user-photo">
					<img src="<%= photo %>" />
				</span>
				<span class="user-title">
					<%= first_name %> <%= last_name %>
				</span>			
			</div>
			<ul class="content"></ul>
		</div>
    </script>
    
    <script type="text/template" id="tpl-user-full">
		<div class="user-full">
			<span class="user-photo">
				<img src="<%= photo %>" />
			</span>
			<span class="user-title">
				<%= first_name %> <%= last_name %>
			</span>
		</div>
    </script>

	<script type="text/template" id="tpl-album-short">

        <%
        if (album_id) {
            var anchor = 'anchor-tracklist-'+owner_id+'-'+album_id;
            var hash = 'user/'+ owner_id +'/tracklist/'+ album_id +'/';
        } else {
            var anchor = 'anchor-tracklist-'+owner_id;
            var hash = 'user/'+ owner_id +'/tracklist/';
        }
        %>

		<div class="album-short anchor <%= anchor %> hash-trigger"
			 data-hash="<%= hash %>">
			<span class="album-title"><%= title %></span>
		</div>
    </script>

	<script type="text/template" id="tpl-friends">
		<div class="friends-container"></div>
    </script>   
    
	<script type="text/template" id="tpl-pager">
		<div class="pager-control">
			<span class="page-prev <%= prev %>">Назад</span>
			<span class="page-next <%= next %>">Вперед</span>
		</div>
    </script>

    <script type="text/template" id="tpl-audio-tracks">
		<div></div>
    </script>

    <script type="text/template" id="tpl-more-tracks">
		<div class="more-tracks">Загрузить еще</div>
    </script>

	<script type="text/template" id="tpl-download-links">
		<div class="download-head">
			<span class="download-h1">Ссылки на скачивание, найденные по запросу:</span>
			<span class="download-title"><%= title %></span>
			<span class="download-help">Для скачивания перейдите по ссылке</span>
			<span class="close">Закрыть</span>
		</div>
		<div class="container">
		</div>
	</script>

	<script type="text/template" id="tpl-download-link">
		<a href="<%= href %>" target="_blank"><%= title %></a>
    </script>

	<script type="text/template" id="tpl-video-player-wrap">
		<div class="video-head">
			<span class="video-title"></span>
			<span class="close">Закрыть</span>
		</div>
		<div class="video-container">
		</div>
		<div class="video-controls">
			<div class="thumbs-prev"></div>
			<div class="thumbs-wrap">
				<div class="thumbs">
				</div>
			</div>
		<div class="thumbs-next"></div>
		</div>
		
    </script>

	<script type="text/template" id="tpl-video-thumb-vk">
		<img class="clickThumb-trigger" src="<%= thumb %>" width=100 />
    </script>

	<script type="text/template" id="tpl-video-full-vk">
		<iframe src="<%= player %>"></iframe>
    </script>

	<script type="text/template" id="tpl-video-search-err">
		<span class="close">Закрыть</span>
		<div class="error-info">
				<div class="error-text">Видео по запросу не найдено</div>
				<div class="read-mode">
					<div class="video-query"><%= query %></div>
					<span class="btn edit">Редактировать запрос</span>
				</div>
				<div class="edit-mode">
					<textarea><%= query %></textarea>
					<div>
						<span class="btn save">Применить</span>
						<span class="btn cancel">Отмена</span>
					</div>
				</div>
		</div>
    </script>

	<script type="text/template" id="tpl-links-search-err">
		<span class="close">Закрыть</span>
		<div class="error-info">
				<div class="error-text">Ссылок для скачивания по запросу не найдено</div>
				<div class="read-mode">
					<div class="download-query"><%= query %></div>
					<span class="btn edit">Редактировать запрос</span>
				</div>
				<div class="edit-mode">
					<textarea><%= query %></textarea>
					<div>
						<span class="btn save">Применить</span>
						<span class="btn cancel">Отмена</span>
					</div>
				</div>
		</div>
    </script>
    <script type="text/template" id="tpl-error">
		<div class="error-block">
			<div class="error-title"><%= title %></div>
			<div class="error-text"><%= text %></div>
		</div>
    </script>

	<script type="text/template" id="tpl-title">
		<div class="head-block">
			<div class="title"><%= title %></div>
			<div class="sub-title"><%= sub_title %></div>
		</div>
    </script>
	<div id="player-hider">
		<div id="jp_container_1" class="jp-audio">
            <div class="jp-play"></div>
            <div class="jp-pause"></div>
            <div class="hidden">
                <div class="jp-mute"></div>
                <div class="jp-unmute"></div>
                <div class="jp-volume-max"></div>
                <div class="jp-progress">
                  <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                  </div>
                </div>
                <div class="jp-volume-bar">
                  <div class="jp-volume-bar-value"></div>
                </div>
                <div class="jp-time-holder">
                  <div class="jp-current-time"></div>
                  <div class="jp-duration"></div>
                  <ul class="jp-toggles">
                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                  </ul>
                </div>
            </div>
		</div>
	</div>

<?php $this->endContent(); ?>
